<template>
    <div>
        <h1>房号列表</h1>
        <input type="button" value="批量删除" style="background-color: brown;" @click="DelList">
        <input type="button" value="批量上架" style="background-color:chartreuse;" @click="Update(1)">
        <input type="button" value="批量下架" style="background-color:cadetblue;" @click="Update(0)"></input>
        <table class="table table-bordered"> 
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="allcheck" @change="checked" ></td>
                    <td>房型名称</td>
                    <td>房间号码</td>
                    <td>房间描述</td>
                    <td>状态</td>
                </tr>
                <tr v-for="value in list">
                    <td><input type="checkbox" v-model="check" :value="value.id"></td>
                    <td>{{value.oname}}</td>
                    <td>{{value.num}}</td>
                    <td>{{value.introduce}}</td>
                    <td>{{value.state==1?"上架":"下架"}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import router from '@/router';
let list:any=ref([]);

let check:any=ref([]);
let allcheck=ref();
 
onMounted(()=>{
    GetList();
})

const GetList=()=>{
    axios({
        url:'https://localhost:7058/api/Num/Getnum',
        method:'get',
    })
    .then((res)=>{
        console.log(res);
        list.value=res.data
    })
    .catch((err)=>{
        console.log(err);
    })
}

const checked=()=>{
     if(allcheck.value==true){
        check.value=list.value.map((item:any)=>{
            return item.id
        })
     }
     else{
        check.value=[];
     }
}

const DelList=()=>{
    if(check.value==""){
        alert("未选择数据");
        return;
    }
    let f=confirm("确认删除吗");
    if(f){
        axios({
        url:'https://localhost:7058/api/Num/DelList',
        method:'get',
        params:{
            ids:check.value.toString()
        }
    })
    .then((res)=>{
       if(res.data>0){
        alert("删除成功");
        allcheck.value=false;
        check.value=[];
        GetList();
       }
    })
    }
}
const Update=(state:any)=>{
    if(check.value==""){
        alert("未选择数据");
        return;
    }
    let f=confirm("确认修改吗");
    if(f){
        axios({
        url:'https://localhost:7058/api/Num/UpdateStateList',
        method:'get',
        params:{
            ids:check.value.toString(),
            state:state
        }
    })
    .then((res)=>{
       if(res.data>0){
        alert("修改成功");
        allcheck.value=false;
        check.value=[];
        GetList();
       }
    })
    }
}

</script>

<style scoped>

</style>